<template>
  <div class="box">
    <!-- 导航 -->
    <div class="title">
      <span class="el-icon-arrow-left" @click="$router.go(-1)"></span>
      Tier Benefits
    </div>
    <!-- 切换 按钮 -->
    <div class="switchover">
      <div @click="checkLevel('1')"
           :class="{'switchover_color':currentId==='1'}">{{ $t('Gold') }}
      </div>
      <div @click="checkLevel('2')"
           :class="{'switchover_color':currentId==='2'}">{{$t('Silver')}}
      </div>
      <div @click="checkLevel('3')"
           :class="{'switchover_color':currentId==='3'}">{{ $t('Member') }}
      </div>
      <div @click="checkLevel('4')"
           :class="{'switchover_color':currentId==='4'}">{{$t('Platinum')}}
      </div>
    </div>
    <!-- 内容 -->
    <div class="centent">
      <div>
        <div class="cen_title_size">Unlock at 4,500 points</div>
        <div class="list_title">
          <img src="../../../../assets/static/recharge/q4.png" alt=""/>
          <div>$t(Ways to add funds to your balance')</div>
        </div>
      </div>
      <!-- card -->
      <div class="cen_card">
        <div v-for="item in dataList" :key="item.ROW_NUMBER">
          <div class="card_img"><img :src="item.image" alt=""></div>
          <div class="card_size">
            <div>{{ item.title }}</div>
            <div>{{ item.content }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 常见问题 -->
    <div class="CJwenti">
      <div class="CJwenti_back">
        <img src="../../../../assets/static/levelIntro/a1.png" alt="">
        <div>{{$t('Frequently Asked Questions')}}</div>
      </div>
      <div class="el-icon-arrow-right"></div>
    </div>
  </div>
</template>

<script>
import {newslist} from '@/api/merbership/level'
import {BASE_URL} from '@/config/api'

export default {
  data() {
    return {
      info: {},
      dataList: [],
      currentId: '1',
      baseUrl: BASE_URL
    }
  },
  activated() {
    this.newslist()
  },
  methods: {
    /**
     * 查询等级介绍
     * @param index
     */
    checkLevel(index) {
      this.currentId = index
      this.newslist()
    },
    // --------------------- axios --------------------------
    /**
     * 等级介绍
     */
    newslist() {
      const pd = {
        id: this.currentId
      }
      newslist(this.$qs.stringify(pd))
        .then(res => {
          this.dataList = res.data.data
        })
    }
  }
}
</script>

<style scoped>
.box {
}

/* 导航 */
.title {
  background-color: #7ac91b;
  color: #fff;
  font-size: 18px;
  text-align: center;
  font-weight: bold;
  padding: 15px;
}

.title .el-icon-arrow-left {
  float: left;
  margin-top: 5px;
}

/* 按钮 切换 */
.switchover {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  font-size: 15px;
  box-shadow: 0 5px 5px #ccc;
}

.switchover > div {
  padding: 15px;
}

.switchover_color {
  color: #67C41D;
  border-bottom: solid 2px #67C41D;
}

/* 内容 */
.centent {
  margin: 15px;
}

/* 内容 标题 */
.cen_title_size {
  color: #999;
  font-size: 11px;
}

.list_title {
  margin: 12px 0;
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
}

.list_title div {
  margin-left: 13px;
}

/* 内容 列表 card */
.cen_card {
  border-radius: 10px;
  overflow: hidden;
}

.cen_card > div {
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  padding: 12px;
  border-bottom: #F5F5F5 solid 1px;
}

.card_img {
  width: 25px;
  height: 25px;
  padding: 13px;
  border-radius: 25px;
  background-color: rgba(0, 0, 0, 0.1);
  margin-right: 14px;
}

.card_img_one {
  background-color: rgba(0, 0, 0, 0.4);
}

.card_img img {
  width: 25px;
  height: 29px;
}

.card_size > div:nth-child(1) {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}

.card_size > div:nth-child(2) {
  font-size: 12px;
  color: #999999;
}

/* 常见问题 */
.CJwenti {
  margin: 15px;
  display: flex;
  justify-content: space-between;
  padding: 5px 12px;
  background-color: #fff;
  align-items: center;
  border-radius: 15px;
}

.CJwenti_back {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333333;
  font-weight: 600;
}

.CJwenti_back img {
  width: 34px;
  margin-top: 5px;
}
</style>
